<template>
  <div class="homeBOx">
    <div class="top">
      <div class="tu">
        <div class="text">注册人数</div>
        <div id="tu1" class="echarts"></div>
      </div>
      <div class="tu">
        <div class="text">用户分布</div>
        <div id="tu2" class="echarts"></div>
      </div>
      <div class="tu">
        <div class="text">帖子数量</div>
        <div id="tu3" class="echarts"></div>
      </div>
      <div class="tu">
        <div class="text">课程数量</div>
        <div id="tu4" class="echarts"></div>
      </div>
    </div>
    <div class="center">
      <echartsBox></echartsBox>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import echartsBox from './cpn/echarts.vue'
import { registerCount } from '@/api/user'
import { getDifferentSubjectInCount } from '@/api/course'
import { getDifferentSchoolCount } from '@/api/user'
import { getDifferentSubjectInCountFn } from '@/api/post'
export default {
  components: {
    echartsBox
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{b}' + '{c}' + '人'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 10
              }
            },
            data: [
              { value: 0, name: '学生' },
              { value: 0, name: '教师' }
            ]
          }
        ]
      },
      option1: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{d}%'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 10
              }
            },
            data: []
          }
        ]
      },
      option2: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{b}' + '{d}' + '%'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 10
              }
            },
            data: []
          }
        ]
      },
      option3: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{b}\n{d}%'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 10
              }
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    var myChart1 = echarts.init(document.getElementById('tu1'))
    myChart1.setOption(this.option)
    var myChart2 = echarts.init(document.getElementById('tu2'))
    myChart2.setOption(this.option1)
    var myChart3 = echarts.init(document.getElementById('tu3'))
    myChart3.setOption(this.option2)
    var myChart4 = echarts.init(document.getElementById('tu4'))
    myChart4.setOption(this.option3)
    registerCount().then(res => {
      const echartsData = this.option.series[0].data
      echartsData[0].value = res.data.student
      echartsData[1].value = res.data.teacher
      myChart1.setOption(this.option)
    })
    getDifferentSchoolCount().then(res => {
      this.option1.series[0].data = res.data
      myChart2.setOption(this.option1)
    })
    getDifferentSubjectInCountFn().then(res => {
      this.option2.series[0].data = res.data
      myChart3.setOption(this.option2)
    })
    getDifferentSubjectInCount().then(res => {
      this.option3.series[0].data = res.data
      myChart4.setOption(this.option3)
    })

    window.onresize = function() {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
    }
  }
}
</script>

<style lang="less" scoped>
.homeBOx {
  padding: 0 50px;
  // padding-bottom: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.top {
  flex: 1;
  display: flex;
  justify-content: space-between;
  .tu {
    width: 24%;
    font-size: 24px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .text {
      width: 100%;
      text-align: center;
    }
    .echarts {
      height: 80%;
    }
  }
}
.center {
  flex: 2;
  margin-top: 10px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>